<template>
  <div class="data-table">
    <div class="meta">
      <meta-table :data="tableData" :colConfig="tableConfig" isIndex="true" />
    </div>
    <pagination
      :total="total"
      :background="false"
      :small="true"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      @pagination="getData"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import MetaTable from "@/views/components/MetaTable.vue";

// 表格数据
const tableData = ref([]);
// 这里和 dataMeta的数据列表一致
const tableMate = ref([
  {
    name: "款式组合",
    fieldName: "kuanshi",
    type: "string",
    length: 80,
    decimalPlaces: 0,
  },
  {
    name: "门店",
    fieldName: "mendian",
    type: "string",
    length: 60,
    decimalPlaces: 0,
  },
  {
    name: "年",
    fieldName: "year",
    type: "date",
    length: 60,
    decimalPlaces: 0,
  },
  {
    name: "销售数量(件)",
    fieldName: "saleAmount",
    type: "int",
    length: 18,
    decimalPlaces: 0,
  },

  {
    name: "零售单价(元)",
    fieldName: "retailPrice",
    type: "float",
    length: 18,
    decimalPlaces: 2,
  },
  {
    name: "折扣率",
    fieldName: "discountRate",
    type: "float",
    length: 38,
    decimalPlaces: 2,
  },
  {
    name: "折后单价(元)",
    fieldName: "discountedPrice",
    type: "float",
    length: 18,
    decimalPlaces: 2,
  },
  {
    name: "折后总价",
    fieldName: "discountedTotalPrice",
    type: "float",
    length: 38,
    decimalPlaces: 2,
  },
  {
    name: "零售总额",
    fieldName: "retailTotalPrice",
    type: "float",
    length: 38,
    decimalPlaces: 2,
  },
]);
// 表格配置
let tableConfig = ref([]);

let total = ref(0);
let queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
});
onMounted(() => {
  getData();
});
const getData = () => {
  let data = {
    kuanshi: "款式",
    mendian: "门店",
    year: 2022,
    saleAmount: 34,
    retailPrice: 110,
    discountRate: 0.13,
    discountedPrice: 100,
    discountedTotalPrice: 1200,
    retailTotalPrice: 1510,
  };
  for (let i = 0; i < 9; i++) {
    let temp = { ...data };
    temp.kuanshi = data.kuanshi + i;
    temp.mendian = data.mendian + i;
    temp.saleAmount = Number((Math.random() * 2000).toFixed(2));
    temp.retailPrice = Number((Math.random() * 200).toFixed(2));
    temp.discountRate = Number(Math.random().toFixed(2));
    temp.discountedPrice = (temp.retailPrice * temp.discountRate).toFixed(2);
    temp.discountedTotalPrice = (
      temp.discountedPrice * temp.saleAmount
    ).toFixed(2);
    temp.retailTotalPrice = (temp.retailPrice * temp.saleAmount).toFixed(2);
    tableData.value.push(temp);
  }
  total = tableData.value.length;
  tableConfig.value = tableMate.value.map((item) => {
    return {
      label: item.name,
      prop: item.fieldName,
      minWidth: "100",
    };
  });
};
</script>

<style lang="scss" scoped>
.data-table {
  width: 100%;
  overflow-y: hidden;
  height: 100%;

  .meta {
    // 100% -  pagination.height
    height: calc(100% - 30px);
  }
}

.pagination-container {
  padding: 3px 10px;
}
:deep(.el-pagination) {
  justify-content: flex-start !important;
}
</style>
